<template>
	<view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" @click="login">
				<view class="cu-avatar round lg" :style="'background-image:url('+user_info.avatarUrl+');'"></view>
				<view class="content">
					<view class="text-grey">{{user_info.user_id?user_info.nickname:'登录/注册'}} </view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							{{user_info.phone?user_info.phone:'未填手机号'}}
						</view>
					</view>
				</view>
				<view class="action" style="width: 160upx;">
					{{user_info.phone?'更换手机号':'去认证'}}
				</view>
			</view>

			<view class="bg-white margin-top padding" style="border-bottom: 1px solid #eee;">我的账单地址</view>
			<view class="bg-white padding text-gray text-sm" v-if="noneRoomsList">
				您当前还未绑定物业账单地址，建议您更换手机号或联系物业管理员
			</view>
			<view class="cu-list menu sm-border" v-else>
				<view class="cu-item" v-for="item in roomsList" @click="pay(item)">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-title text-blue margin-right-xs"></text>{{item.community.name}}</view>
						<view class="text-gray text-sm">
							<text class="cuIcon-infofill margin-right-xs"></text> {{item.room_info.address}}</view>
					</view>
					<view class="action">
						<view class="cu-tag round bg-blue light">查看账单</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-top">
				<view class="cu-item arrow" @click="jump('/pages/bills/bills',0)" >
					<view class="content">
						<text class="cuIcon-moneybagfill text-red"></text>
						<text class="text-red">物业缴费</text>
					</view>
				</view>
			</view>

			<view class="cu-list menu sm-border margin-top">
				
				<view class="cu-item arrow"  @click="jump('/pages/bills/billsRecords')"   >
					<view class="content">
						<image src="/static/09.png" class="png" mode="aspectFit"></image>
						<text class="text-grey">缴费记录</text>
					</view>
				</view>
				
				<view class="cu-item arrow" @click="login">
					<view class="content">
						<text class="cuIcon-phone text-blue"></text>
						<text class="text-grey">绑定/更新手机号</text>
					</view>
				</view>

				<view class="cu-item arrow" @click="jump('/pages/user/topics?pid=94')"  >
					<view class="content">
						<text class="cuIcon-warn text-green"></text>
						<text class="text-grey">投诉与建议</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import beeApp from '../../beeApp.js'
	export default {
		data() {
			return {
				items: {},
				user_info: {
					tenement_type: [],
					community: {

					}
				},
				noneRoomsList: 0,
				hotline: '',
				user_id: 0,
				roomsList: [],
				userStatistics: {},
				mounted: 0,
				out_room_id: 0,
				community_id: 0,
			}
		},
		onLoad() {
			this.fetchData();
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		},
		onPullDownRefresh() {
			this.fetchData();
			uni.stopPullDownRefresh();
		},

		onShow: function() {
			var reload = beeApp.getPageData('pages/user/index', 'reload');
			if (reload == 1) {
				beeApp.setPageData('pages/user/index', {
					reload: 0
				});
				this.fetchData();
			}
			
			// var user_info = uni.getStorageSync("user_info");
			// if(!user_info){
			// 	uni.reLaunch({
			// 		url: '/pages/user/bindphone?page=auth',
			// 		complete: function(res) {
			// 			console.log(res);
			// 		}
			// 	})
			// }
		},

		methods: {
			login(){
				if(this.user_info.user_id){
					this.bindPhone();
				}else{
					 
					beeApp.wxGetUserInfo(()=>{
						this.fetchData();
					});
					 
				}
			
				 
			},
			jump(url,login=1){
				if(!this.user_info.user_id && login){
					this.login();
					return;
				}
				uni.navigateTo({
					url:url
				})
			},
			contactUs: function() {
				uni.makePhoneCall({
					phoneNumber: this.hotline
				});
			},
			pay(item) {
				uni.navigateTo({
					url: "/pages/bills/bills?out_room_id=" + item.out_room_id + "&community_id=" + item.community_id,
				})
			},
			getRoomsList: function() {
				var that = this;
				beeApp.api("/api/community_houses/get", {
					user_id: that.user_info.user_id,
				}, function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.roomsList = res.data.list;
					if (that.roomsList.length == 0) {
						that.noneRoomsList = 1;
					} else {
						that.noneRoomsList = 0;
					}

				});
			},
			bindPhone: function() {
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/user/wxbindphone'
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/user/bindphone'
				})
				// #endif
				
			},
			fetchData: function fetchData() {
				var _this = this;
				this.getUserInfo();
				// _this.user_info = beeApp.getUserInfo();
			},

			getUserInfo: function() {
				var that = this;
				beeApp.api("/api/user/info", {
					store_id: -1,
					fields: "user_id,store_id,phone,nickname,phone,avatarUrl,last_update_time,community,community.bills_count,topic_count,waitingpay,tenement_type,community_count,out_room_id"
				}, function(res) {
					if (res.code == 200) {
						that.user_info = res.data;
						// that.out_room_id = res.data.out_room_id;
						that.getRoomsList();
					}

				});
			}

		}
	}
</script>

<style>
	.cu-list.menu>.cu-item .content .png {
		width: 40upx;
		height: 40upx;
	}
</style>
